<!-- 搜索表单 -->
<template>
  <div>
    <el-form label-width="77px"
             class="ele-form-search"
             ref="where"
             :model="where">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="商家名称:"
                        prop="merchantName">
            <el-input clearable
                      v-model="where.merchantName"
                      placeholder="请输商家名称" />
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item prop="transactionId"
                        label="订单编号:">
            <el-input clearable
                      v-model="where.transactionId"
                      placeholder="请输入订单编号" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 8 }">
          <el-form-item label="订单金额:"
                        prop="orderAmount">
            <div style="display: flex">
              <el-input clearable
                        maxlength="10"
                        v-model.number="where.orderAmount.startForecastBrokerage"
                        placeholder="请输入金额" />
              <span style="margin: 0 5px 0">至</span>
              <el-input clearable
                        maxlength="10"
                        v-model.number="where.orderAmount.endForecastBrokerage"
                        placeholder="请输入金额" />
            </div>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }"
                v-if="currentPlatform =='总平台'">
          <el-form-item prop="parentCode"
                        label="oem代理:">
            <el-select clearable
                       class="ele-block"
                       v-model="where.parentCode"
                       placeholder="请选择oem代理">
              <el-option v-for="(i, j) in oemList"
                         :key="j"
                         :label="i.oemCode"
                         :value="i.oemCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item prop="oemCode"
                        label="下属代理:">
            <el-select clearable
                       class="ele-block"
                       v-model="where.oemCode"
                       placeholder="请选择下属代理">
              <el-option v-for="(i, j) in secondaryList"
                         :key="j"
                         :label="i.oemCode"
                         :value="i.oemCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 8 } : { span: 8 }">
          <el-form-item label="申请时间:"
                        prop="dateRange">
            <el-date-picker v-model="where.dateRange"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            class="ele-fluid" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <div class="ele-form-actions">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="ele-btn-icon"
                       @click="search">
              查询
            </el-button>
            <el-button @click="resetForm('where')">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
export default {
  data () {
    let validateAmount = (rule, value, callback) => {
      console.log(value);
      if (
        value.startForecastBrokerage == '' &&
        value.endForecastBrokerage == ''
      ) {
        callback();
      }
      if (
        typeof value.startForecastBrokerage == 'number' &&
        typeof value.endForecastBrokerage == 'number'
      ) {
        if (value.startForecastBrokerage && value.endForecastBrokerage) {
          callback();
        } else {
          callback(new Error('请输入订单金额开始值和结束值'));
        }
      } else {
        callback(new Error('订单金额开始值和结束需为数字'));
      }
    };

    return {
      // 表单数据

      where: {
        // 商家名称
        merchantName: '',

        orderAmount: {
          // 订单开始金额
          startForecastBrokerage: '',
          // 订单结束金额
          endForecastBrokerage: ''
        },

        // 订单编号
        transactionId: '',
        dateRange: [],
        parentCode: '',
        oemCode: ''

      },
      sumbitForm: {},
      //   正则
      rules: {
        orderAmount: [{ validator: validateAmount, trigger: 'blur' }]
      },

    };
  },
  props: {
    oemList: {
      type: Array,
      default: () => []
    },
    secondaryList: {
      type: Array,
      default: () => []
    },
    currentPlatform: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    /* 搜索 */
    search () {
      for (const key in this.where) {
        if (key == 'dateRange') {
          let startTime = this.where[key]?.[0];
          let endTime = this.where[key]?.[1];
          this.sumbitForm['startTime'] = startTime == undefined ? '' : startTime;
          this.sumbitForm['endTime'] = endTime == undefined ? '' : endTime;;
        } else if (key == 'orderAmount') {
          this.sumbitForm['startForecastBrokerage'] =
            this.where[key].startForecastBrokerage == undefined ? '' : this.where[key].startForecastBrokerage;
          this.sumbitForm['endForecastBrokerage'] = this.where[key].endForecastBrokerage == undefined ? '' : this.where[key].endForecastBrokerage;
        } else {
          this.sumbitForm[key] = this.where[key];
        }
      }
      console.log(this.sumbitForm);
      this.$emit('search', this.sumbitForm);
    },
    /*  重置 */
    resetForm (formName) {
      console.log(formName)
      this.where.orderAmount.startForecastBrokerage = '';
      this.where.orderAmount.endForecastBrokerage = '';

      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      })



      this.sumbitForm = {};
      this.$emit('search', this.sumbitForm);
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .el-form-item__label {
  text-align: inherit;
}
.navList {
  margin-bottom: 25px;
  font-weight: 700;
}
</style>
